﻿
(function ($) {
    $.fn.mfixed = function (settings) {
        settings = $.extend({}, $.fn.mfixed.defaults, settings || {});
        return this.each(function () {
            $elem = $(this);
            _mfixed = new mfixed(settings, $elem);
            _mfixed.enable();
            $elem.data('_mfixed', _mfixed);
        });
    };
    $.fn.mfixed.defaults = {
        on: 'mousedown',
        width: '100px',
        height: '100px'
    };
    mfixed = function (settings, $elem) {
        this.settings = settings;
        this.$elem = $elem;
        this.wrapper = '<div class="mfixed_wraper"></div>';
        this.width = $elem.width();
        this.height = $elem.height();
        this.left = $elem.css('left');
        this.top = $elem.css('top');
        return this;
    };
    mfixed.prototype = {
        setup: function () {
            this.$elem.wrap(this.wrapper);
            $wrapper = $('.mfixed_wraper');
            $wrapper.css({ width: this.$elem.width(), height: this.$elem.height() });
            $wrapper.css({ position: 'relative', left: this.left, top: this.top, margin: 0, padding: 0 });
            this.$elem.css({ left: 0, top: 0 });
        },
        remove: function () {
            this.$elem.unwrap();
            this.$elem.css({ left: this.left, top: this.top, width: this.width, height: this.height });
        },
        enable: function () {
            self = this;
                    self.setup();
            this.$elem
                .bind(this.settings.on, function (e) {
                    self.start(e);
                }).bind('mouseup', function (e) {
                    self.stop();
                }).bind('mouseout', function (e) {
                    self.stop();
                });
        },
        start: function (e) {
            $wrapper = $('.mfixed_wraper');
            this.$elem.css({ width: this.settings.width, height: this.settings.height });
            newpos = this.pos(e);
            this.$elem.css(newpos);
            newpos_wrap = {
                left: parseInt($wrapper.css('left'), 10) + newpos.left,
                top: parseInt($wrapper.css('top'), 10) + newpos.top
            }
            $wrapper.css(newpos_wrap);
            $wrapper.css({ width: this.settings.width, height: this.settings.height });

            this.$elem.css({ left: 0, top: 0 });
        },
        stop: function (e) {
            this.$elem.css({ left: 0, top: 0, width: this.width, height: this.height });
            $('.mfixed_wraper').css({ left: this.left, top: this.top, width: this.width, height: this.height });
        },
        pos: function (e) {
            parent = $('.mfixed_wraper');
            child = this.$elem;
            offset = parent.offset();

            left_parent = (e.pageX - offset.left);
            top_parent = (e.pageY - offset.top);

            left_small = left_parent / parent.width() * child.width();
            top_small = top_parent / parent.height() * child.height();

            leftdiff = left_parent - left_small;
            topdiff = top_parent - top_small;

            newpos = {
                left: leftdiff, top: topdiff
            };
            return newpos;
        }
    };
})(jQuery);





